import { Box, Card, CircularProgress, DialogContent, DialogTitle, Typography } from '@mui/material';
import React, { useState } from 'react';

import PayrollGroupMember from '../../../api/payroll-group-member/payroll-group-member';
import PayrollGroupMemberManager from '../../../api/payroll-group-member/payroll-group-member-manager';
import GFSDialog from '../dialogs/gfs-dialog';
import { GFSButton } from './gfs-button';

interface Props {
    payrollGroupMember: PayrollGroupMember;
    onDelete: Function;
}

const RemoveButton = (props: Props) => {
    const { payrollGroupMember, onDelete } = props;
    const [open, setOpen] = useState(false);

    const [deleting, setDeleting] = useState<boolean>(false);

    const onClickRemove = async () => {
        setOpen(false);
        await deleteFnc();
    };

    const deleteFnc = async () => {
        setDeleting(true);

        const deleted = await PayrollGroupMemberManager.delete(payrollGroupMember.id);

        if (deleted == true) {
            onDelete(payrollGroupMember);
        } else {
            setDeleting(false);
        }
    };

    return (
        <>
            {deleting == false && (
                <Card
                    sx={{
                        width: '150px',
                        background: '#0B0821',
                        paddingTop: '5px',
                        paddingBottom: '5px',
                        color: '#FFF',
                        cursor: 'pointer'
                    }}
                    onClick={() => setOpen(true)}
                >
                    Remove
                    <Box
                        component="img"
                        sx={{
                            height: '15px',
                            width: '15px',
                            marginLeft: '10px'
                        }}
                        alt="Remove"
                        src="/remove.svg"
                    />
                </Card>
            )}

            {deleting == true && <CircularProgress size={15} />}

            <GFSDialog open={open} sx={{ '& .MuiPaper-root': { width: 360 } }}>
                <DialogTitle style={{ display: 'block', textAlign: 'center' }}>
                    <span
                        style={{
                            fontStyle: 'normal',
                            fontWeight: '600',
                            fontSize: '20px',
                            lineHeight: '30px'
                        }}
                    >
                        Are you sure you want to delete{' '}
                        <span style={{ color: 'var(--color-warning)' }}>
                            {payrollGroupMember.member.name}
                        </span>{' '}
                        from this group?
                    </span>
                </DialogTitle>
                <DialogContent>
                    <Typography variant={'h6'} textAlign={'center'} pb={4} pt={2} fontWeight={300}>
                        Are you sure that you want to remove this member?
                    </Typography>
                    <GFSButton onClick={onClickRemove} sx={{ width: '100%', mb: 2 }}>
                        Remove
                    </GFSButton>
                    <GFSButton
                        sx={{ width: '100%' }}
                        onClick={() => setOpen(false)}
                        color="secondary"
                        variant={'text'}
                    >
                        Cancel
                    </GFSButton>
                </DialogContent>
            </GFSDialog>
        </>
    );
};

export default RemoveButton;
